<template>
  <div>
    <!--面包屑功能-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>SKU管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片区-->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="getGoodsList">
            <template slot="prepend">商品名称</template>
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--表格部分-->
      <el-table border stripe :data="goodList" style="width: 100%">
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_price" width="150" label="商品价格(元）"> </el-table-column>
        <el-table-column prop="goods_weight" width="100" label="商品重量"> </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button @click="SkuhandleClick(scope.row.goods_id)" type="success" size="mini" icon="el-icon-delete">SKU货品</el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="inkufun(scope.row.goods_id)">入库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区放置-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!--货品SKU对话框 start -->
    <el-dialog title="商品SKU查看" :visible.sync="SKUdialogVisible" width="80%">
      <!--对话框 start -->
      <el-table :data="prodatalist" stripe border style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="Goods_id" label="商品编号" width="80"> </el-table-column>
        <el-table-column prop="Good_name" label="商品名称" width="180"> </el-table-column>
        <el-table-column prop="Good_SKUName" label="产品名称" width="180"> </el-table-column>
        <el-table-column prop="Good_Price" label="销售价" width="80"> </el-table-column>
        <el-table-column prop="Good_Price" label="VIP售价" width="80"> </el-table-column>
        <el-table-column prop="Good_SKU_KCPrice" label="库存价" width="80"> </el-table-column>
        <el-table-column prop="Good_SKU_Attr" label="参数组合"> </el-table-column>
        <el-table-column prop="Good_SKU_KC" label="库存" width="80"> </el-table-column>
        <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)"  size="mini">改售价</el-button>
          <el-button  size="mini">改名称</el-button>
        </template>
      </el-table-column>
      </el-table>
      <!--对话框 end-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="SKUdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SKUdialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--货品对话框 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 条件查询数据对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      // 查询商品数据列表
      goodList: [],
      // 查询出来记录总条数
      total: 10,
      // SKU对话框打开
      SKUdialogVisible: false,
      // 对应商品的产品列表，查询
      prodatalist: [],
    }
  },
  methods: {
    // 1 查询商品列表
    async getGoodsList() {
      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.warning('获取商品列出错')
      }
      // 设置到集合中
      this.goodList = res.data.goods
      this.total = res.data.total
    },
    // 分页控件相关事件对应方法
    // 每页条数变化
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      // 再查询
      this.getGoodsList()
    },
    // 当前页码变化
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getGoodsList()
    },
    // 打开SKU查看对话框 商品id作为参数
    async SkuhandleClick(gid) {
      // 异步查询
      const { data: res } = await this.$http.get('product?goodId=' + gid)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.warning('获取产品列表出错')
      }
      this.prodatalist = res.data
      // 查看sku
      this.SKUdialogVisible = true
    },
    // 入库，点击后转到入库窗口,商品id,用路由传参
    inkufun (gid) {
      // 路由传参
      this.$router.push('/inku/' + gid)
    }
  },
  created() {
    this.getGoodsList()
  },
  mounted() {},
}
</script>

<style>
</style>
